import React, {useEffect} from 'react';
import {useJsonStore} from "@/DragAndDrop/provider";
import {ColFlex, RowFlex} from "dw-mx-flex";

export default function BigScreenCanvas(props){
    const {children,designWidth,designHeight,bgpic,layout} = props;
    let bg = "";
    if(bgpic && bgpic != ''){
        bg = bgpic;
    }

    useEffect(()=>{

    },[]);
    return (<div id={'mainPage'} style={{width:designWidth,height:designHeight,background:'url('+bg+')'}}>
        {layout && layout == 'rowlayout' ? <RowFlex style={{height:'100%',width:'100%'}}>
            {children}
    </RowFlex> : <ColFlex style={{height:'100%',width:'100%'}}>
            {children}
        </ColFlex>}
    </div>);
}